/*
 * Copyright (C) 2015 Actor LLC. <https://actor.im>
 */

@mixin side-profile() {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  overflow-y: auto;

  padding: 0;
}

.profile {
  &__list {
    margin: 0;
    padding: 0 0 0 24px;

    list-style: none;
    &__item {
      font-size: 15px;
      line-height: 24px;

      padding: 24px 24px 24px 0;

      vertical-align: middle;

      color: $greyish-brown;
      box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .075);
      .icon {
        margin-right: 16px;
        //margin-left: 10px;
      }
      span {
        vertical-align: middle;
      }
      .switch {
        label {
          margin-top: 1px;
        }
      }
      .info {
        font-size: 15px;
        line-height: 22px;
        p {
          margin: 0;
        }
        a {
          display: inline-block;

          margin-top: 16px;

          text-decoration: none;

          color: $dark-sky-blue;
        }
        &--light {
          color: $color-empty;
        }
      }

      &:last-child {
        box-shadow: none;
      }
    }
  }
}

.user_profile {
  @include side-profile();
  &__meta {
    padding-right: 16px;
    header {
      height: 60px;

      @include clearfix();
    }

    .avatar {
      float: left;

      margin-right: 14px;
    }
    &__title {
      font-size: 16px;
      font-weight: 500;
      line-height: 38px;

      margin: 0;

      color: $dorado;

      @include text-elipsis();
      .emoji-outer {
        width: 20px;
        height: 20px;
      }
    }
    &__message {
      font-size: 14px;
      line-height: 22px;

      color: rgba(0, 0, 0, .3);

      @include text-elipsis();
    }
    &__about {
      font-size: 15px;
      line-height: 22px;

      margin-top: 18px;

      color: $greyish-brown;
      .emoji-outer {
        width: 20px;
        height: 20px;
      }
    }

    footer {
      margin-top: 18px;

      @include clearfix();
    }
  }
  &__notifications {
    & > label {
      line-height: 24px;

      display: block;

      padding: 24px 24px 24px 6px;

      cursor: pointer;
      user-select: none;
      vertical-align: middle;
    }
  }
  &__contact_info {
    &__list {
      margin: 0;
      padding: 0 0 0 46px;

      list-style: none;
      li {
        padding: 17px 0;

        box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .075);
        .icon {
          float: left;

          margin-top: 8px;
          margin-left: -40px;
        }
        .title {
          a {
            cursor: pointer;
            text-decoration: none;

            color: $greyish-brown;
            &:hover {
              color: $dark-sky-blue;
            }
          }
        }
        span {
          display: block;
          &.title {
            font-size: 15px;
            line-height: 24px;
          }
          &.description {
            font-size: 13px;
            line-height: 16px;

            user-select: none;
            text-transform: lowercase;

            color: rgba(black, .4);
          }
        }
        &:last-child {
          box-shadow: none;
        }
      }
    }
  }

  .dropdown__menu {
    top: 47px;
  }
}

.group_profile {
  @include side-profile();
  &__meta {
    padding-right: 16px;
    header {
      height: 60px;

      @include clearfix();
    }

    .avatar {
      float: left;

      margin-right: 14px;
    }
    &__title {
      font-size: 16px;
      font-weight: 500;
      line-height: 38px;

      margin: 0;

      color: $dorado;

      @include text-elipsis();
      .emoji-outer {
        width: 20px;
        height: 20px;
      }
    }
    &__created {
      font-size: 14px;
      line-height: 22px;

      height: 22px;

      color: rgba(0, 0, 0, .3);
      .emoji-outer {
        width: 20px;
        height: 20px;
      }
    }
    &__description {
      font-size: 14px;
      line-height: 22px;

      margin-top: 18px;

      color: $greyish-brown;
    }

    footer {
      margin-top: 18px;
    }
  }
  &__notifications {
    & > label {
      line-height: 24px;

      display: block;

      padding: 24px 24px 24px 6px;

      cursor: pointer;
      user-select: none;
      vertical-align: middle;
    }
  }
  &__members {
    &__list {
      margin: -16px 0 0;
      padding: 0;

      list-style: none;
      &__item {
        line-height: 36px;

        padding-top: 20px;
        padding-right: 24px;

        color: $greyish-brown;

        @include clearfix();
        a {
          cursor: pointer;
        }
        .avatar {
          float: left;

          margin-right: 10px;
        }
        .controls {
          a {
            color: $dark-sky-blue;
          }
        }
        .emoji-outer {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  &__media {
    ul {
      padding-left: 46px;

      list-style: none;
      a {
        cursor: pointer;

        color: $dark-sky-blue;
      }
    }
  }
  &__integration {
    .fold__content {
      padding-right: 16px;
      padding-left: 46px;
    }
    .textarea {
      height: 98px;
      margin-top: 18px;
      margin-left: -9px;
    }
  }

  .dropdown__menu {
    top: 47px;
  }
}
